<template>
      <div class="grid">
        <div>
            <div> <span :class="[(tableData.price-tableData.lastClose)>=0 ? 'red' : 'green']">{{tableData.price}}</span></div>
            <div class="childGrid">
              <span  :class="[(tableData.price-tableData.lastClose)>=0 ? 'red' : 'green']">{{tableData.updown}}</span>
                <span :class="[(tableData.price-tableData.lastClose)>=0 ? 'red' : 'green']">{{tableData.updownRange}}%</span>
            </div>
        </div>
        <div>
          <div><span>高</span><span :class="[(tableData.high-tableData.lastClose)>=0 ? 'red' : 'green']">{{tableData.high}}</span></div>
            <div><span>低</span><span :class="[(tableData.low-tableData.lastClose)>=0 ? 'red' : 'green']">{{tableData.low}}</span></div>
        </div>
        <div>
           <div><span>开</span><span :class="[(tableData.open-tableData.lastClose)>=0 ? 'red' : 'green']">{{tableData.open}}</span></div>
            <div><span>指</span><span :class="[(tableData.exponent-tableData.lastClose)>=0 ? 'red' : 'green']">{{tableData.exponent}}</span></div>
        </div>
        <div>
          <div><span>量</span><span class="black">{{(tableData.num/10000).toFixed(2)}}万</span></div>
           <div><span>额</span><span class="black">${{(tableData.quota/10000).toFixed(2)}}万</span></div>
        </div>

      </div>
</template>
<script>
import store from "@/store";
import {currentTrade } from "@/api/service";
export default {
//   props: ["param"],
  data() {
    return {
        clearTime:null,
        tableData: {
          lastClose:0,
          price: 0,
          high: 0,
          open: 0,
          num: '0',
          updown: -0.04,
          updownRange: '0',
          low: 0,
          exponent: 0,
          quota: '$0'
        }
    };
  },
  mounted() {
    this.search();
  },
  created(){
   this.clearTime=setInterval(()=>{this.search()},60*1000);
  },
  destroyed(){
    if(this.clearTime)clearInterval(this.clearTime);
  },
  methods: {
    search() {
      currentTrade().then((res) => {
            if(res.data){
                this.tableData={
					lastClose: res.data.lastClose,
                    price:res.data.current,
                    high: res.data.highest,
                    open: res.data.open,
                    num: res.data.volume,
                    updown: res.data.change,
                    updownRange: res.data.changePercent,
                    low:res.data.lowest,
                    exponent:res.data.dealGuidingPrice,
                    quota:res.data.volumePrice,
                }
            }
      });
    }
  },
};
</script>
<style lang="less" scoped>
.grid{
  display: grid;
  grid-template-columns: auto auto auto auto;
  text-align: center;
  font-size:14px;
  .childGrid{
  display: grid;
  grid-template-columns: auto auto;
  }
}
  .info {
      font-size: 14px;
      span {
        display:inline-block;
        margin-left: 5px
      }
      span:last-child {
        font-weight: 1000;
      }

      .red {
        color: red
      }

      .green {
        color: green
      }
    }

</style>
